import React, { useState } from "react";
import type { FC } from "react";
import { FormOutlined, UserOutlined } from "@ant-design/icons";

import { Outlet, useNavigate } from "react-router-dom";
import "./index.scss";
import ParticleBackground from "@/components/ParticleBackground";

const Home: FC = () => {
  const navigator = useNavigate();
  return (
    <div className="Home">
      <ParticleBackground></ParticleBackground>
      <div className="header">
        <div className="left">
          <FormOutlined />
          <span onClick={() => navigator("/home/start")}>问卷星</span>
        </div>
        <div className="right">
          <span>
            <UserOutlined />
            <span>用户xx</span>
          </span>
          <span
            className="layout"
            onClick={() => {
              console.log(1111111);
            }}
          >
            退出
          </span>
        </div>
      </div>
      <div className="content">
        <Outlet />
      </div>
      <div className="footer">问卷星@react18-ts-ant by sxy</div>
    </div>
  );
};

export default Home;
